import React from "react";
import {withRouter} from 'react-router-dom'
import {connect} from 'react-redux'
import '../game-filter/game-filter.css'
import GoBackLayout from "../../layouts/GoBackLayout/GoBackLayout";
import BtnSortedByPinyin from "../game-filter/BtnSortedByPinyin/BtnSortedByPinyin";
import {goBack} from "../../utils/goback";

class GameFilterBasketball extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
            events: [],
        }
    }

    componentDidMount() {
        const list = this.props.location.state.list
        const events = []
        list.map((game, index) => {
            let event = {}
            event.value = {Name: game.Name,}
            event.active = false
            event.id = index
            if (events.findIndex(e => e.value.Name === event.value.Name) === -1) {
                events.push(event)
            }
        })
        this.setState({
            events: events,
        })
    }

    selectOneGame = (e, itemToSelect) => {
        const arr = [...this.state.events]
        // setCurrentData(arr)
        const i = arr.findIndex(item => item.id === itemToSelect.id)
        arr[i].active = !arr[i].active
        this.setState({
            events: arr,
        })
    }

    selectAll = () => {
        const arr = [...this.state.events]
        arr.forEach(item => item.active = true)
        this.setState({events: arr})
    }

    reverseAll = () => {
        const arr = [...this.state.events]
        arr.forEach(item => item.active = !item.active)
        this.setState({events: arr})
    }

    changeFilter = (arr) => {

        const eventFilters = [...arr].filter(event => event.active === true)
        if (eventFilters.length !== arr.length) {
            this.props.changeEventFilter({eventFilters,})
        }
        if (arr.every(event => event.active === true)) {
            this.props.changeEventFilter({eventFilters: [],})
        }
        goBack(this.props.history)
    }


    render() {
        const events = this.state.events
        const history = this.props.history
        return <GoBackLayout
            history={history}
            title='赛事选择'
        >

            <BtnSortedByPinyin
                btns={events}
                keyName='Name'
                selectOneGame={this.selectOneGame}
            />
            <div className='flex-center-align-center game-filter-bottom-btns'>

                <div className='flex-space-between-align-center game-filter-bottom-btn-left'>
                    <div onClick={this.selectAll}>
                        <span>全选</span>
                    </div>
                    <div onClick={this.reverseAll}>
                        <span>反选</span>
                    </div>
                </div>
                <div
                    className='game-filter-bottom-btn-right'
                    onClick={() => this.changeFilter(this.state.events)}
                >
                    <span>确定</span>
                </div>
            </div>

        </GoBackLayout>
    }
}

const mapState = (state) => ({
    eventFilters: state.game.eventFilters,
})

const mapDispatch = dispatch => ({
    changeEventFilter: (payload) => dispatch.game.changeEventFilter(payload)
})


export default connect(mapState, mapDispatch)(withRouter(GameFilterBasketball))